<template>
  <transition name="bounce" mode="out-in">
    <div class="mh-container">
      <mh-header headName="ta的才艺"> </mh-header>
      <div class="mui-content">
        <div class="mui-scroll">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell" v-for="item in talentsList" :key="item.talentId">
              <a href="javascript:" @tap="viewTalentsDetail(item.talentId)">
                <div class="media-list">
                  <img :src="item.srcList[0]">
                </div>
                <div class="mui-media-body">
                  <div class="mui-ellipsis-2">{{item.title}}</div>
                </div>
              </a>
              <div class="user-operate flex-bt">
                <a href="javascript:" class="flex">
                  <img src="../../assets/images/ico/ic_t_gift.png" alt="送礼物">
                  <span>送礼物</span>
                </a>
                <a href="javascript:" class="flex">
                  <img src="../../assets/images/ico/ic_t_money.png" alt="打赏">
                  <span>打赏</span>
                </a>
                <a href="javascript:" class="flex">
                  <img src="../../assets/images/ico/ic_t_share.png" alt="转发">
                  <span>转发</span>
                </a>
              </div>
            </li>
          </ul>
          <p class="no-more">没有更多了~</p>

        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "talents",
    data () {
      return {
        talentsList: [
          // {
          //   talentId: '1',
          //   srcList: [
          //     'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2307001494,1485507584&fm=11&gp=0.jpg'
          //   ],
          //   title: '2016年在北京后海拍摄一段视频'
          // },
          // {
          //   talentId: '2',
          //   srcList: [
          //     'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3754091570,281341992&fm=11&gp=0.jpg'
          //   ],
          //   title: '人生总是需要一场说走就走的旅行'
          // },
          // {
          //   talentId: '3',
          //   srcList: [
          //     'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4003773159,1840402590&fm=15&gp=0.jpg'
          //   ],
          //   title: '最喜欢的一组照片摄于伦敦'
          // }
        ]
      }
    },
    created () {
      if (this.talentsList.length > 0) {
        //页面回弹
        console.log(mui('.mui-scroll-wrapper').scroll());
        mui('.mui-scroll-wrapper').scroll({
          scrollY: true, //是否竖向滚动
          deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
      }
    },
    methods: {
      viewTalentsDetail (id) {
        this.$router.push({
          path: `/meet/talents/${id}`,
          params: {
            id: id
          }
        })
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  .media-list {
    img {
      width: 100%;
    }
  }
  .mui-media-body {
    margin-top: .5rem;
  }
  .user-operate {
    margin-top: 1.5rem;
    align-items: center;
    span {
      font-size: 1.2rem;
      color: #999999;
    }
    img {
      width: 1.25rem;
      margin-right: 1rem;
    }
  }
  .no-more {
    text-align: center;
    padding: 2rem 1.5rem;
    overflow: inherit;
  }
</style>
